<template>
  <div id="app">
    <header id="header" class="auto-rem mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">
        物流信息
      </h1>
    </header>
    <div class="mui-content">
      <div v-if="!detail" style="font-size: 14px;">数据加载中，请稍候</div>
      <div v-else>
        <div>
          <span v-if="order.delivery_id == 1">天天快递</span>
          <span v-if="order.delivery_id == 2">中通快递</span>&nbsp;&nbsp;
          {{ order.delivery_code }}
        </div>
        <ul class="slg mui-table-view mui-table-view-chevron" style="overflow-y: scroll; font-size: 14px;">
          <li v-for="item in detail" class="mui-table-view-cell mui-media" style="text-align: left;">
            <div class="mui-media-body">
              {{ item.status }} ( {{ item.time }} )
            </div>
          </li>
        </ul>
        <div v-if="error" style="font-size: 14px;">暂无此单号的物流数据，请稍后再查询</div>
      </div>
    </div>
  </div>
</template>

<script>

  import {ajax, apiDomain} from 'assets/js/Lib'
  import {mask, maskSpinner} from 'assets/js/slgMask'

  export default {
    data() {
      return {
        order: null,
        detail: null,
        error: false,
      }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {
    },
    //在挂载开始之前被调用
    beforeMount() {
    },
    //已成功挂载，相当ready()
    mounted() {
      const vm = this

      mui.init({
        swipeBack: false,
        statusBarBackground: '#f7f7f7'
      })

      mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
      });

      let params = url('?');

      ajax({
        url: '/api/order/check_delivery',
        data: {
          id: params.id,
        },
        type: 'GET',
        success: (res) => {
          console.log('res', res);
          if (res.order) {
            this.order = res.order;
          }
          if (res.delivery && res.delivery.status == '0') {
            this.detail = res.delivery.result.list;
          } else {
            this.detail = [];
            this.error = true;
          }
        },
        complete: function () {

        }
      })

    },
    //相关操作事件
    methods: {

    }
  }
</script>

<style lang="less">
  .bottom-nav-bar {
    width: 10rem;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
  }

  .buttons {
    width: 3.3rem;
    height: 1.5625rem;
    float: left;
    overflow: hidden;
    border-top: 1px solid #cccccc;
    .mui-icon-extra {
      font-size: .75rem;
      line-height: .75rem;
    }
    .item {
      width: 50%;
      height: 1.5625rem;
      float: left;
      text-align: center;
      padding-top: .15rem;
      color: #333333;
      opacity: .8;
      border-right: 1px solid #cccccc;
      span {
        display: block;
      }
      .item-text {
        font-size: .375rem;
        line-height: .5rem;
      }
    }
  }

  .actions {
    width: 6.7rem;
    height: 1.5625rem;
    overflow: hidden;
    float: left;
    border-top: 1px solid #cccccc;
    .action-button {
      width: 50%;
      color: #ffffff;
      font-size: .46875rem;
      float: left;
      height: 100%;
      line-height: 1.5625rem;
      text-align: center;
      &.yellow {
        background-color: #ffb03f;
        &.biyao {
          background-color: white;
          color: #7f4395;
        }
      }
      &.red {
        background-color: #f23030;
        &.biyao {
          background-color: #7f4395;
        }
      }
    }
  }

  .back-top {
    display: none;
    line-height: 0;
    padding: .2rem;
    position: fixed;
    right: .4rem;
    bottom: 1.8rem;
    z-index: 3;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50px;
    .mui-icon-extra-top {
      opacity: .5;
      font: .75rem;
    }
  }

  .product-title {
    width: 100%;
    background-color: #fff;
    span {
      display: block;
    }
    .title-text {
      padding: .5rem .4rem 0 .4rem;
      font-size: .5625rem;
      line-height: .65625rem;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .sub-title-text {
      padding: .2rem .4rem 0 .4rem;
      font-size: .375rem;
      line-height: .5rem;
      color: #333333;
      opacity: .5;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .price-text {
      padding: .2rem .4rem 0 .4rem;
      color: #f23030;
      font-weight: 700;
      font-size: .6rem;
      line-height: 1rem;

      .score-text {
        color: #333333;
        display: inline-block;
        font-size: .3rem;
      }
    }
  }

  .product-panel {
    margin-top: .5rem;
    box-shadow: 0px 3px 3px #cccccc;

    .mui-table-view-cell {
      padding: .34375rem .46875rem;

      .mui-navigate-right {
        font-size: .53125rem;
        line-height: .65625rem;
      }
    }
  }

  .product-info-title {
    margin-top: .5rem;
    width: 100%;
    height: 1.4375rem;
    padding: .5rem;
    font-size: .4375rem;
    line-height: .4375rem;
    color: #333333;
    text-align: left;
    background-color: white;
    border-bottom: 1px solid #cccccc;
  }

  .product-info {
    box-shadow: 0px 3px 3px #cccccc;
    margin-bottom: 2rem;
    img {
      width: 100%;
    }
  }

  body {
    background-color: #fff !important;
  }

  #app {

    .mui-bar .mui-segmented-control {
      top: 0px;
      height: 44px;
      width: 60%;
    }

    .mui-slider-indicator {
      .div-item {
        display: table-cell;
        padding: 0 5%;
      }
    }

    .mui-segmented-control .mui-control-item {
      line-height: 44px;
      margin: 0 auto;
      display: table;
      padding: 0 5px;
    }

    .mui-control-content {
      min-height: 200px;
    }

    .mui-slider-group {
      transform: translate3d(0px, 0px, 0px) translateZ(0px);
      transition-duration: 200ms !important;
      transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
  }
</style>
